iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0
自我挑戰組

Web Franework -SASS/SCSS系列 第 3

Day 3 - 變數、嵌套

  • 分享至 

  • xImage
  •  

#變數、嵌套

1.變數(Variables)
變數是SASS/SCSS中的主要功能之一,我們可以透過變數將重複使用的樣式值"抽象化"(意指將具體的細節和複雜性隱藏起來,並專注於處理更高層次的概念或結構),方便統一管理。
變數的使用介紹:
變數的名稱都已$開頭,可以儲存任何CSS值。

2.嵌套(Nesting)
嵌套功能可以讓我們根據HTML的結構撰寫程式,使代碼更加直觀、清楚好懂。相比傳統的CSS使用冗長的選擇器來定義樣式,嵌套可以使這個過程更為簡潔。
嵌套的使用介紹:
嵌套可以依照HTML結構轉寫樣式,清晰的表達層次關係,不過嵌套不建議超過3層,因為越多層越難維護。

今天的變數和嵌套的解析就到這邊,歡迎糾正錯誤。
加油!!!


上一篇
Day 2 - 了解SASS和SCSS
下一篇
Day 4 - 繼承、Mixin
系列文
Web Franework -SASS/SCSS26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言